<template>
  <view class="goods2-wrap">
    <view class="carousel-section">
      <!-- 标题栏和状态栏占位符 -->
      <view class="titleNview-placing"></view>
      <!-- 背景色区域 -->
      <view class="titleNview-background" :style="{ backgroundColor: titleNViewBackground }"></view>
      <swiper class="carousel" autoplay="true" interval="4000" circular="true" duration="500" @change="swiperChange">
        <swiper-item v-for="(item, index) in d1_bannerData" :key="index" class="carousel-item">
          <image :src="item.banner_img_cdn" />
        </swiper-item>
      </swiper>
      <!-- 自定义swiper指示器 -->
      <view class="swiper-dots">
        <text class="num">{{ bannerCurrent + 1 }}</text>
        <text class="sign">/</text>
        <text class="num">{{ bannerLength }}</text>
      </view>
      <!-- <view class="mallindex-swiper-point">
        <view class="mallindex-swiper-pointbd" v-for="(item, index) in d1_bannerData" :key="index">
          <view class="mallindex-swiper-pointdot" :class="[bannerCurrent == index ? 'active' : '']"></view>
        </view>
      </view> -->
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      titleNViewBackground: '',
      bannerCurrent: 0,
      bannerLength: 3,
      bannerBgArr: ['rgb(203, 57, 60)', 'rgb(205, 215, 218)', 'rgb(249, 199, 84)', 'rgb(183, 73, 69)', 'rgb(24, 171, 227)'],
      d1_bannerData: [{ banner_img_cdn: '/static/swiper_list/2.jpg' }, { banner_img_cdn: '/static/swiper_list/2.jpg' }, { banner_img_cdn: '/static/swiper_list/2.jpg' }]
    };
  },
  methods: {
    swiperChange: function (e) {
      //轮播图切换修改背景色
      const index = e.detail.current;
      this.bannerCurrent = index;
      this.titleNViewBackground = this.d1_bannerData[index].background;
    },
    getIndexInfo: function () {
      this.allApi.getMallHome({
        bid: uni.getStorageSync('business_id'),
        latitude: uni.getStorageSync('latitude'),
        longitude: uni.getStorageSync('longitude')
      }).then(function (successRes) {

        this.d1_bannerData = successRes.d1_bannerData; // banner
        this.bannerLength = this.d1_bannerData.length;
        for (let i = 0; i < this.bannerLength; i++) {
          this.d1_bannerData[i].background = this.bannerBgArr[i];
        }
        this.titleNViewBackground = (this.d1_bannerData[0] && this.d1_bannerData[0].background) || '';

        this.count++;
      });
    },
  }
};
</script>

<style>
.goods2-wrap {
  padding: 30rpx 20rpx;
}
.carousel-section {
  position: relative;
  padding-top: 10px;
}
.carousel-section .titleNview-placing {
  height: var(--status-bar-height);
  padding-top: 44px;
  box-sizing: content-box;
}
.carousel-section .titleNview-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 426rpx;
  transition: 0.4s;
}
.carousel-section .titleNview-background::after {
  content: "";
  width: 140%;
  height: 400rpx;
  position: absolute;
  left: -20%;
  top: 0;
  border-radius: 0 0 50% 50%;
  background: rgb(203, 87, 60);
}
.carousel {
  width: 100%;
  height: 350rpx;
}
.carousel .carousel-item {
  width: 100%;
  height: 100%;
  padding: 0 28rpx;
  overflow: hidden;
}
.carousel image {
  width: 100%;
  height: 100%;
  border-radius: 10rpx;
}
.swiper-dots {
  display: flex;
  position: absolute;
  left: 60rpx;
  bottom: 15rpx;
  width: 72rpx;
  height: 36rpx;
}
.swiper-dots .num {
  width: 36rpx;
  height: 36rpx;
  border-radius: 50px;
  font-size: 24rpx;
  color: #fff;
  text-align: center;
  line-height: 36rpx;
}
.swiper-dots .sign {
  position: absolute;
  top: 0;
  left: 50%;
  line-height: 36rpx;
  font-size: 12rpx;
  color: #fff;
  transform: translateX(-50%);
}
</style>
